import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import QtWeChat 1.0

ColumnLayout {
    id: root

    property alias model: chatMsgList.model
    signal sendMsg(string msg)

    ListView {
        id: chatMsgList
        Layout.fillWidth: true
        Layout.fillHeight: true
        model: ListModel {
            ListElement {
                nickName: "Apple"
                content: "Orange，你好！"
                isSend: true
            }
            ListElement {
                nickName: "Orange"
                content: "Apple，你好！"
                isSend: false
            }
            ListElement {
                nickName: "Orange"
                content: "你这是要去哪里啊？"
                isSend: false
            }
            ListElement {
                nickName: "Apple"
                content: "我今天打算去动物园。\n你想跟我一起去吗？"
                isSend: true
            }
            ListElement {
                nickName: "Orange"
                content: "好啊！\n谢谢你的邀请。\n我马上回家换件衣服。\n一会儿再见！"
                isSend: false
            }
            ListElement {
                nickName: "Apple"
                content: "好的！\n一会儿再见！"
                isSend: true
            }
        }
        spacing: 10
        delegate: ItemDelegate {
            width: root.width
            height: chatContent.height
            Row {
                id: chatContent
                width: root.width
                layoutDirection: isSend ?  Qt.LeftToRight : Qt.RightToLeft
                spacing: 10
                Rectangle {
                    width: 50
                    height: 50
                    color: "green"
                    Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                    Layout.fillWidth: false
                }

                Column {
                    spacing: 1
                    Text {
                        color: "#b2b2b2"
                        font.pixelSize: 12
                        text: nickName
                        width: control.width
                        horizontalAlignment: isSend ? Qt.AlignLeft : Qt.AlignRight
                    }
                    Control {
                        id: control
                        width: background.sourceSize.width + chatMsg.width
                        height:  background.sourceSize.height + chatMsg.height
                        background: NinePatchImage {
                            source:isSend ? "qrc:/images/chat_dialog@send.9.png" : "qrc:/images/chat_dialog.9.png"
                            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                            Layout.fillWidth: false

                            Text {
                                id: chatMsg
                                anchors.centerIn: parent
                                font.pixelSize: 24
                                text: content
                            }
                        }
                    }
                }
            }
        }
    }

    Rectangle {
        Layout.fillWidth: true
        height: 64
        color: "#EFEFEF"
        RowLayout {
            anchors.fill: parent
            TextField {
                id: textField
                font.pixelSize: 24
                Layout.fillWidth: true
                height: 64
            }
            Button {
                text: qsTr("发送")
                onClicked: {
                    root.sendMsg(textField.text);
                    textField.clear();
                }
            }
        }
    }
}
